<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{{$pageTitle}}-{{$site[title]}}</title>
<meta http-equiv="Cache-Control" content="no-cache" />
<!--meta-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
	<meta NAME="ROBOTS" CONTENT="INDEX,FOLLOW">
	<meta name="Keywords" content="{{if $seokeywords}}{{$seokeywords}}{{else}}{{$site[seokeywords]}}{{/if}}" />
	<meta name="Description" content="{{if $seodescription}}{{$seodescription}}{{else}}{{$site[seodescription]}}{{/if}}" />
	<!--[if lt IE 9]>
		{{$this->Html->script(array('html5shiv.js','respond.min.js'))}}
	<![endif]-->
	{{$this->Html->meta('icon')}}
	
	<?PHP echo $this->Combinator->less(); ?>
	{{$this->Html->css(array('font-awesome.min.css','ui-customer'))}}
	
	{{$this->Html->script(array(
            'jquery/jquery.min.js',
            'bootstrap.min.js',
        ));
	}}
	<style>hr{margin:10px 0;}</style>
</head>
<body>
	
	<div class="container">
		<h2>135-随机抽奖助手</h2>
		<div class="row">
			<div  class="col-md-10">
				<div >参与人数： <input class="form-control" style="width:64px;display:inline;" type="text" id="join-num" value="40"> <button class="btn btn-primary" onclick="genarateIds($('#join-num').val())" >自动生成序号</button></div>
			    <div class="clearfix" style="padding:5px;border:2px solid green" id="names">
			    </div>	
		    </div>
		    <div  class="col-md-2">
		    	抽取人数：<input class="form-control" style="width:45px;display:inline;" type="text" id="check-num" value="5">
		    	<a id="start" class="btn btn-warning" href="javascript:start();" style="margin:5px;" >开始抽奖</a>
	    		<a id="end" class="btn btn-success" href="javascript:stop()" style="margin:5px;display:none;" >停止抽奖</a>
	    		
	    		
		    </div>  
	    </div>  
	    <h3>{{__('The Result')}}</h3>
	    <div id="results"></div>
    </div>
    <script type="text/javascript" src="http://www.wx135.com//js/jquery/jquery.min.js"></script>
    
    <script>
    
    
        var names = document.getElementById("names").getElementsByTagName("div");
        var length = names.length;
        var oldNum = 0;
        var total = 6;
        var jiang = 5
        var sh;
        var winners = [];
        var totalWinners = [];
        
        $(function(){
        	genarateIds();
        });
        
        function genarateIds(){
        	totalWinners = [];$('#results').html("");
        	total = $('#join-num').val();
        	var html = "";
       	 	for( var i=1;i <= total;i++ ){
       		 	html += '<div class="btn btn-default pull-left" style="width:45px;height:35px;padding-top:7px;">'+ i +'</div>';
		    }
       	 	$('#names').html(html);
        }
        
        
        function run(){
        	$('#names .btn').removeClass('btn-success');
        	winners = [];
        	
        	if( totalWinners.length + jiang > total ) {
        		clearInterval(sh);
        		alert("剩余人员数名不够了");
        		return;
        	}
        	
        	var i = 0;
        	for(i=0;i< jiang;i++){
	            var num = 0;
	            do{
	            	num = Math.floor((Math.random()*total));	            	
	            	if( jQuery.inArray(num,winners) == -1  && jQuery.inArray(num,totalWinners) == -1 ) {
	            		break;
	            	}
	            } while( 1 );
	            
	            winners.push(num);
	            $(names[num]).addClass('btn-success');  
	        }
        }
        
        function stop(){
        	$('#start').removeAttr('disabled').show();
        	$('#end').hide();
        	clearInterval(sh);
        	
        	for(var i in winners){
        		totalWinners.push(winners[i]);
        	}
        	
        	var ws = "";
        	$('#names .btn-success').each(function(){
        		ws += $(this).html()+";";
        	});
        	
        	$('#results').prepend(ws+"<hr>");
        	
        }
        
        function start(){
        	
        	jiang = parseInt($('#check-num').val());
        	total = parseInt($('#join-num').val());
        	
        	clearInterval(sh);
            sh=setInterval(run,30);
            $('#start').attr('disabled',true).hide();
            $('#end').show();
        }
        
        

    </script>
</body>

</html>
